<template>
  <div>
    <div id="methods">
      <div ref="buttons"></div>
    </div>
    <div id="hello"></div>
    <!-- 创建操作按钮放置容器 -->
    
  </div>
</template>

<script>
import mxgraph from "../utils/mxgraph";

const { mxGraph, mxClient, mxUtils,mxCodec, mxConstants,mxHierarchicalLayout } = mxgraph;
export default {
  mounted() {
    if (!mxClient.isBrowserSupported()) {
      mxUtils.error("Brower is not supported!", 200, false);
    } else {
      // 找到图形容器并且创建图表
      let container = document.getElementById("hello");
      let MxGraph = mxGraph;
      var graph = new MxGraph(container);

      // 定义操作按钮

     

   

      // 生成hello world
      var parent = graph.getDefaultParent();

      // 表示mxgraph图准备更新前的状态
      graph.getModel().beginUpdate();

      // 定义布局
      var layout = new mxHierarchicalLayout(graph)

         // 通过对象设置节点样式
      var nodeStyle = {};
      nodeStyle[mxConstants.STYLE_FILLCOLOR] = "#3CAEA3";
      nodeStyle[mxConstants.STYLE_FONTSIZE] = 20;
      nodeStyle[mxConstants.STYLE_STROKE_COLOR] = "red";
      nodeStyle[mxConstants.STYLE_FONTCOLOR] = "#000";
      nodeStyle[mxConstants.STYLE_ROUNDED] = 1;

      // 将定义好的样式对象push到stylesheet中
      graph.getStylesheet().putCellStyle("nodeStyle", nodeStyle);
      try {
        // 生成节点 , 参数 (父亲节点 , id名称 , 节点内容 , 距离左边的距离 ,距离上边的距离 自身宽高 , 节点css属性)
        var v1 = graph.insertVertex(
          parent,
          null,
          "第一步",
          20,
          200,
          100,
          80,
          "fillColor=#3CAEA3;strokeColor=white;fontStyle=1;fontColor=white;rounded=1;fontSize=20"
        );
        var v2 = graph.insertVertex(
          parent,
          null,
          "第二步",
          200,
          150,
          80,
          30,
          "nodeStyle"
        );
        var v3 = graph.insertVertex(parent, null, "第三步", 300, 350, 80, 80);
        var v4 = graph.insertVertex(parent, null, "第四步", 400, 550, 60, 60);
        // 生成连线 (父容器 , id , '箭头提示文字' , 箭头起始点 箭头结束点 )
        graph.insertEdge(parent, null, "正确", v1, v2);
        graph.insertEdge(parent, null, "", v1, v3);
        graph.insertEdge(parent, null, "", v2, v3);
        graph.insertEdge(parent, null, "", v3, v4);
        graph.insertEdge(parent, null, "", v1, v4);
        layout.execute(parent)
        // 调整位置
        // adjustPos();
      } finally {
        // mxgraph更新后的状态
        graph.getModel().endUpdate();
      }
      
    }
     // 放大按钮
      this.$refs.buttons.appendChild(
        mxUtils.button("ZoomIn", function (evt) {
          // graph.ZoomIn();
          console.log(evt)
        })
      );

      this.$refs.buttons.appendChild(
        mxUtils.button("ZoomOut", function () {
          // graph.ZoomOut();
        })
      );

      // 查看图形的xml
      document.body.appendChild(mxUtils.button('View Xml',function(){
        var encoder  = new mxCodec()
        var node = encoder.encode(graph.getModel());
        mxUtils.popup(mxUtils.getPrettyXml(node),true)
      }))


      this.$refs.buttons.appendChild(
        mxUtils.button("ZoomActual", function () {
          // graph.ZoomActual();
        })
      );
  },
};
</script>


<style scoped>
</style>
